// Anksčiau:
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('root'));

// Dabar:
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render();

import { Suspense } from 'react';

function MyComponent() {
 const data = fetchData(); // Tarkime, fetchData() grąžina į Promise panašų objektą
 return (
  

   
{data.title}
   
{data.description}
  
 );
}

function App() {
 return (
  Kraunama...

Šiame pavyzdyje `MyComponent` komponentas bando nuskaityti duomenis iš `fetchData` funkcijos. Jei duomenys dar nėra prieinami, komponentas „sustabdys“ atvaizdavimą, o `Suspense` komponentas parodys atsarginę UI (šiuo atveju „Kraunama...“). Kai duomenys bus prieinami, komponentas tęs atvaizdavimą.

Transitions naudojimas neskubiems atnaujinimams

Naudokite Transitions norėdami pažymėti atnaujinimus, kurie nėra skubūs. Tai leidžia React teikti pirmenybę naudotojo įvesčiai ir kitoms svarbioms užduotims. Galite naudoti `useTransition` hook'ą, kad sukurtumėte perėjimus.

import { useState, useTransition } from 'react';

function MyComponent() {
 const [isPending, startTransition] = useTransition();
 const [value, setValue] = useState('');

 const handleChange = (e) => {
  startTransition(() => {
   setValue(e.target.value);
  });
 };

 return (
  

   
   
Value: {value}
   {isPending && 
Atnaujinama...
}
  
 );
}

export default MyComponent;

Šiame pavyzdyje `handleChange` funkcija naudoja `startTransition`, kad atnaujintų `value` būseną. Tai nurodo React, kad atnaujinimas nėra skubus ir prireikus gali būti nustatytas žemesnis prioritetas. `isPending` būsena nurodo, ar šiuo metu vyksta perėjimas.

Praktiniai pavyzdžiai ir naudojimo atvejai

Concurrent režimas yra ypač naudingas programose, kuriose yra:

• Sudėtingos vartotojo sąsajos: Programos su daug interaktyvių elementų ir dažnais atnaujinimais gali pasinaudoti pagerintu Concurrent režimo jautrumu.
• Duomenims imlios operacijos: Programos, kurios gauna didelius duomenų kiekius ar atlieka sudėtingus skaičiavimus, gali naudoti Suspense ir Transitions, kad suteiktų sklandesnę naudotojo patirtį.
• Realaus laiko atnaujinimai: Programos, kurioms reikalingi realaus laiko atnaujinimai, pavyzdžiui, pokalbių programos ar akcijų kursų stebėjimo įrankiai, gali naudoti Concurrent režimą, kad užtikrintų greitą atnaujinimų atvaizdavimą.

1 pavyzdys: E. prekybos produktų filtravimas

Įsivaizduokite e. prekybos svetainę su tūkstančiais produktų. Kai naudotojas pritaiko filtrus (pvz., kainų intervalą, prekės ženklą, spalvą), programa turi iš naujo atvaizduoti produktų sąrašą. Pasenusiame režime tai galėtų sukelti pastebimą vėlavimą. Naudojant Concurrent režimą, filtravimo operacija gali būti pažymėta kaip perėjimas (transition), leidžiant React teikti pirmenybę naudotojo įvesčiai ir išlaikyti UI jautrumą. Suspense galima naudoti norint rodyti įkėlimo indikatorių, kol filtruoti produktai yra gaunami iš serverio.

2 pavyzdys: Interaktyvus duomenų vizualizavimas

Apsvarstykite duomenų vizualizavimo programą, kuri rodo sudėtingą diagramą su tūkstančiais duomenų taškų. Kai naudotojas priartina arba paslenka diagramą, programa turi iš naujo atvaizduoti diagramą su atnaujintais duomenimis. Naudojant Concurrent režimą, priartinimo ir slinkimo operacijos gali būti pažymėtos kaip perėjimai, leidžiant React teikti pirmenybę naudotojo įvesčiai ir užtikrinti sklandžią bei interaktyvią patirtį. Suspense galima naudoti norint rodyti vietos rezervavimo ženklą, kol diagrama yra perpiešiama.

3 pavyzdys: Bendradarbiavimu pagrįstas dokumentų redagavimas

Bendradarbiavimu pagrįstoje dokumentų redagavimo programoje keli vartotojai gali redaguoti tą patį dokumentą vienu metu. Tam reikalingi realaus laiko atnaujinimai, siekiant užtikrinti, kad visi vartotojai matytų naujausius pakeitimus. Naudojant Concurrent režimą, atnaujinimai gali būti prioritetizuojami pagal jų skubumą, užtikrinant, kad naudotojo įvestis visada būtų jautri, o kiti atnaujinimai būtų rodomi greitai. Transitions galima naudoti norint sušvelninti perėjimus tarp skirtingų dokumento versijų.

Dažniausi iššūkiai ir sprendimai

1. Suderinamumas su esamomis bibliotekomis

Kai kurios esamos React bibliotekos gali būti nevisiškai suderinamos su Concurrent režimu. Tai gali sukelti netikėtą elgesį ar klaidas. Norėdami tai išspręsti, turėtumėte stengtis naudoti bibliotekas, kurios buvo specialiai sukurtos Concurrent režimui arba buvo atnaujintos, kad jį palaikytų. Taip pat galite naudoti `useDeferredValue` hook'ą, kad palaipsniui pereitumėte prie Concurrent režimo.

2. Derinimas ir profiliavimas

Concurrent režimo programų derinimas ir profiliavimas gali būti sudėtingesnis nei pasenusio režimo programų. Taip yra todėl, kad Concurrent režimas įveda naujas sąvokas, tokias kaip pertraukiamas atvaizdavimas ir prioritetai. Norėdami tai išspręsti, galite naudoti React DevTools Profiler, kad analizuotumėte savo programos našumą ir nustatytumėte galimas kliūtis.

3. Duomenų gavimo strategijos

Efektyvus duomenų gavimas yra labai svarbus siekiant optimalaus našumo Concurrent režime. Venkite gauti duomenis tiesiogiai komponentuose nenaudodami Suspense. Vietoj to, kai tik įmanoma, iš anksto gaukite duomenis ir naudokite Suspense, kad grakščiai tvarkytumėte įkėlimo būsenas. Apsvarstykite galimybę naudoti bibliotekas, tokias kaip SWR ar React Query, kurios yra sukurtos sklandžiai veikti su Suspense.

4. Netikėti pervaizdavimai

Dėl pertraukiamos Concurrent režimo prigimties komponentai gali būti pervaizduojami dažniau nei pasenusiame režime. Nors tai dažnai naudinga jautrumui, kartais gali sukelti našumo problemų, jei nebus atidžiai tvarkoma. Naudokite memoizacijos technikas (pvz., `React.memo`, `useMemo`, `useCallback`), kad išvengtumėte nereikalingų pervaizdavimų.

Geriausios Concurrent režimo praktikos

• Naudokite Suspense duomenų gavimui: Visada naudokite Suspense, kad tvarkytumėte įkėlimo būsenas gaudami duomenis. Tai suteikia geresnę naudotojo patirtį ir leidžia React teikti pirmenybę kitoms užduotims.
• Naudokite Transitions neskubiems atnaujinimams: Naudokite Transitions norėdami pažymėti atnaujinimus, kurie nėra skubūs. Tai leidžia React teikti pirmenybę naudotojo įvesčiai ir kitoms svarbioms užduotims.
• Memoizuokite komponentus: Naudokite memoizacijos technikas, kad išvengtumėte nereikalingų pervaizdavimų. Tai gali pagerinti našumą ir sumažinti React atliekamo darbo kiekį.
• Profiluokite savo programą: Naudokite React DevTools Profiler, kad analizuotumėte savo programos našumą ir nustatytumėte galimas kliūtis.
• Kruopščiai testuokite: Kruopščiai testuokite savo programą, kad įsitikintumėte, jog ji tinkamai veikia Concurrent režime.
• Palaipsniui įdiekite Concurrent režimą: Nebandykite perrašyti visos programos iš karto. Vietoj to, palaipsniui įdiekite Concurrent režimą, pradedant nuo mažų, izoliuotų komponentų.

React ir Concurrent režimo ateitis

Concurrent režimas nėra tik funkcija; tai esminis pokytis, kaip veikia React. Tai pagrindas ateities React funkcijoms, tokioms kaip Serverio komponentai (Server Components) ir atvaizdavimas už ekrano ribų (Offscreen Rendering). React toliau tobulėjant, Concurrent režimas taps vis svarbesnis kuriant didelio našumo ir patogias naudotojui interneto programas.

Ypač didelių vilčių teikia Serverio komponentai. Jie leidžia atvaizduoti komponentus serveryje, sumažinant JavaScript kiekį, kurį reikia atsisiųsti ir įvykdyti kliento pusėje. Tai gali žymiai pagerinti pradinį jūsų programos įkėlimo laiką ir bendrą našumą.

Atvaizdavimas už ekrano ribų (Offscreen Rendering) leidžia iš anksto atvaizduoti komponentus, kurie šiuo metu nėra matomi ekrane. Tai gali pagerinti suvokiamą jūsų programos našumą, todėl ji atrodys jautresnė.

Išvada

React Concurrent režimas yra galingas įrankis kuriant didelio našumo ir jautrias interneto programas. Suprasdami pagrindinius Concurrent režimo principus ir laikydamiesi geriausių praktikų, galite žymiai pagerinti savo programų naudotojo patirtį ir pasiruošti React kūrimo ateičiai. Nors yra iššūkių, kuriuos reikia apsvarstyti, pagerinto jautrumo, patobulintos naudotojo patirties ir geresnio našumo privalumai paverčia Concurrent režimą vertingu turtu bet kuriam React kūrėjui. Pasinaudokite pertraukiamo atvaizdavimo galia ir atskleiskite visą savo React programų potencialą pasaulinei auditorijai.